
compono.ui.Slider = compono.Class({
	min:0,
	step:1,
	max:100,
	value:0,
	percentValue:0,
	template:"",
	
	mode:"",
	
	diff:0,
	html:false,
	element:false,

	constructor:function(o){
		
		var d = new this.$D(null,{slider:this});
		d.DIV({"class":"slider","tabindex":"0"},
			d.DIV({"class":"min"}),
			d.DIV({"class":"rail"},
				d.SPAN({"class":"pointer"})
			),
			d.DIV({"class":"max"}),
			d.INPUT({type:"hidden"})
		)

		this.element=this.$(o);
		
		if(o&&o.attr("type")=="range"){
			o.hide();
			this.min = parseInt(o.attr("min"),10);
			this.max = parseInt(o.attr("max"),10);
			this.value = parseInt(o.attr("value"),10);
			this.step = parseInt(o.attr("step"),10);
			this.template = o.attr("template");
			this.onInput = o.attr("oninput") ? new Function(o.attr("oninput")) : false;
			this.onChange = o.attr("onchange") ? new Function(o.attr("onchange")) : false;
			this.html = o.after(this.$(d.render(false)));
		}else{
			this.html = this.$(d.render());
		}

		this.rail = this.$(this.html.rail);
		this.pointer = this.$(this.html.rail.pointer);
		
	},
	position:function(o){
		var c = this.$(o||this.element).cords();
		this.html.style.left = c.left + "px";
		this.html.style.top = (c.top + c.height)+ "px";
	},
	show:function(){
		if(this.onShow&&this.onShow.call(this,this.html)==false){
			return false;
		}
		this.html.show();
		this.showed = true;
		return this;
	},
	hide:function(){
		if(this.onHide&&this.onHide.call(this,this.html)==false){
			return false;
		}
		this.html.hide();
		this.showed = false;
		return this;
	},
	output:function(v){
		if(this.template){
			return this.element.value = v.toString().format(this.template);
		}
		return this.element.value = v;
	},
	input:function(v){
		v = parseInt(v||this.value,10);
		if(v >= this.min && v <= this.max){
			this.htmlMouseDown();
			
			if(this.step){
				v = parseInt(v/this.step,10) * this.step;
			}
			
			var p = v * 100/this.max-this.min;
			var z = p * this.cords.max / 100;
		}
	},
	cords:{
		min:0,max:0,value:0,diff:0,step:0
	},
	//http://olav.dk/wf2/demo/range.asp
	run:function(o){
		this.element = o||this.element;
		
		this.element.slider = this;
		
		this.element.event("mousedown",function(e){
			this.slider.position();
			this.slider.show();

			this.slider.documentMouseDown.$scope = this.slider;
			this.event("mousedown",this.slider.documentMouseDown,document)
		});
		
		this.html.event("mousedown",function(e){
			e.stopPropagation();
			
			this.slider.documentMouseMove.scope = this.slider;
			this.slider.documentMouseUp.scope = this.slider;
			this.event("mousemove",this.slider.documentMouseMove,document);
			this.event("mouseup",this.slider.documentMouseUp,document);
			
			this.slider.htmlMouseDown();
			this.slider.documentMouseMove.call(document,e);
		});
		
		this.htmlMouseDown = function(){
			this.diff = this.max - this.min;
		
			this.cords.min = parseInt(this.html.offsetLeft + this.rail.offsetLeft,10);
			this.cords.max = parseInt(this.rail.offsetWidth,10);
			this.cords.diff = this.cords.max - this.cords.min;
			
			this.cords.step = (this.step * 100 / this.diff) * this.cords.max / 100;
		}
		
		this.documentMouseMove = function(e){
			var scope = arguments.callee.scope;
			var cords = scope.cords;
			
			cords.value = parseInt(e.clientX - cords.min,10);
			
			if(cords.value < 0){
				cords.value = 0;
			}else if(cords.value > cords.max){
				cords.value = cords.max;
			}
			
			if(cords.step){
				cords.value = parseInt(cords.value/cords.step,10) * cords.step;
			}
			
			var percent = parseInt( cords.value * 100/cords.max ,10);
			var value = percent * scope.diff/100;
			
			if(scope.onChange&&scope.onChange.call(this,value,percent)==false){
				return;
			}
			
			scope.value = value;
			scope.percentValue = percent;
			scope.pointer.style.left = cords.value + "px";
			
			scope.output(value);
		}
		
		this.documentMouseUp = function(e){
			var h = arguments.callee.scope.html;
			h.removeEvent("mousemove",h.slider.documentMouseMove,document);
			h.removeEvent("mouseup",h.slider.documentMouseUp,document);
			h.event("mousedown",h.slider.documentMouseDown,document);
		}
		
		this.documentMouseDown = function(e){
			if(e.target !== arguments.callee.$scope.element){
				arguments.callee.$scope.hide();
			}
		}
		
		//this.input(this.value);
		
		return this;
	}
})




/* *************************************************************************************
	var field;
	field = new compono.ui.Slider.Field();
	field.min = 0;
	field.step = 5;
	field.max = 100;
	field.onChange = function(){}
	field.onInput = function(){}
	field.onShow = function(){}
	field.onHide = function(){}
	field.run();
	
************************************************************************************* */


// compono.ui.Slider.Field = compono.ui.Slider.Class({
	// type:"Field"
// });


/*
	//Appears when the user click on 'treshold' input;
	var bar;
	bar = new compono.ui.Slider.Bar();
	bar.bind($("treshold"));
	bar.min = 0;
	bar.step = 10;
	bar.max = 100;
	bar.side = "before";
	bar.onChange = function(){}
	bar.onInput = function(){}
	bar.onShow = function(){}
	bar.onHide = function(){}
	bar.run();

*/
// compono.ui.Slider.Bar = compono.ui.Slider.Class({
	// type:"Bar"
// });


/*
	var cirle;
	circle = new compono.ui.Slider.Circle();
	circle.bind($("circleRange"))
	circle.min = 0;
	circle.max = 24;
	circle.step = 1;
	circle.value = 15;
	circle.show();
	circle.hide();
	circle.onChange = function(){}
	circle.onInput = function(){}
	circle.onShow = function(){}
	circle.onHide = function(){}
	circle.run();

*/
// compono.ui.Slider.Circle = compono.ui.Slider.Class({
	// type:"Circle"
// });
